<template>
    <div class="exception-list">
        <nav-header>
			<div class="zh-h5-nav">
				<div class="active" @click="changePanel('violation')">违规管理</div>
				<div @click="changePanel('damage')">损坏管理</div>
			</div>
		</nav-header>
        
        <div class="zh-table">
			<div class="zh-table-open clear">
                <div class="zh-open-left fl">
                    <div class="open-width" style="width: 120px">
                        <el-select v-model="listParam.stateId" filterable placeholder="请选择状态">
                            <el-option
                                v-for="item in stateList"
                                :key="item.id"
                                :label="item.name"
                                :value="item.id">
                            </el-option>
                        </el-select>
                    </div>
                    <div class="open-width" style="width: 300px">
                        <el-date-picker
                            v-model="listParam.pickerTime"
                            type="daterange"
                            value-format="yyyy-MM-dd"
                            range-separator=" - "
                            start-placeholder="开始日期"
                            end-placeholder="结束日期">
                        </el-date-picker>
					</div>
                    <div class="open-width">
                        <el-input v-model="listParam.keyword" @keyup.enter.native="searchFunc" placeholder="搜索使用人"></el-input>
                    </div>
                    <el-button type="primary" @click="searchFunc">搜索</el-button>
                    <el-button type="primary" @click="resetList">重置</el-button>
                </div>
                <div class="zh-open-right fr">
                    <el-button type="primary" @click="newRecord">添加记录</el-button>               
                    <el-button type="danger" @click="dleteAllConfirm">批量删除</el-button>
                </div>
            </div>

            <div class="zh-table-contents" v-loading="loading.status" :element-loading-text="loading.txt">
                <el-table
                    :data="listData"
                    fixed
                    border
                    max-height="600"
                    @selection-change="tableSelectionChange"
                    style="width: 100%">
                    <el-table-column
                        type="selection"
                        width="50"
                        align="center"
                        fixed>
                    </el-table-column>
                    <el-table-column
                        prop="number"
                        label="单号"
                        align="center"
                        show-overflow-tooltip>
                    </el-table-column>
                    <el-table-column
                        prop="break_day"
                        label="开单日期"
                        align="center"
                        width="170"
                        show-overflow-tooltip>
                    </el-table-column>
                    <el-table-column
                        prop="car_number"
                        label="车牌号"
                        align="center"
                        width="140"
                        show-overflow-tooltip>
                    </el-table-column>
                    <el-table-column
                        prop="user_name"
                        label="使用人"
                        align="center"
                        show-overflow-tooltip>
                    </el-table-column>
                    <el-table-column
                        prop="comment"
                        label="违章原因"
                        align="center"
                        show-overflow-tooltip>
                    </el-table-column>
                    <el-table-column
                        prop="break_end_day"
                        label="处罚截止时间"
                        align="center"
                        width="170"
                        show-overflow-tooltip>
                    </el-table-column>
                    <el-table-column
                        prop=""
                        label="状态"
                        align="center"
                        width="125"
                        show-overflow-tooltip>
                        <template slot-scope="scope">
                            <span v-if="scope.row.is_solve === 1">已处理</span>
                            <span v-else style="color: #E16060;">未处理</span>
                        </template>
                    </el-table-column>
                    <el-table-column
                        label="操作"
                        align="center"
                        :width="180">
                        <template slot-scope="scope">
                            <el-button @click="getDetail(scope.row.id)" type="text">详情</el-button>
                            <el-button @click="editRow(scope.row.id)" type="text">编辑</el-button>
                            <el-button @click="deleteRowConfirm(scope.row)" type="text" class="delete-button">删除</el-button>
                        </template>
                    </el-table-column>
                </el-table>

				<div class="table-pagination" v-show="totalNumber > 10">
					<el-pagination
						@size-change="changeCurrentSize"
						@current-change="changeCurrentPage"
						:current-page="listParam.pageIndex"
						:page-sizes="[10, 20, 30, 40, 50, 100]"
						:page-size="listParam.pageSize"
						layout="total, sizes, prev, pager, next, jumper"
						:total="totalNumber">
					</el-pagination>
				</div>
			</div>
		</div>

        <el-dialog
            title="违规详情"
            class="violotion-detail"
            width="550px"
            :visible.sync="detailVisible"
            :close-on-click-modal="false">
            <div class="violotion-main">
                <div class="list-item">
                    <span class="item-title">罚单号：</span>
                    <span>{{viewDetail.number}}</span>
                </div>
                <div class="list-item">
                    <span class="item-title">开单日期：</span>
                    <span>{{viewDetail.break_day}}</span>
                </div>
                <div class="list-item">
                    <span class="item-title">违章原因：</span>
                    <span>{{viewDetail.comment}}</span>
                </div>
                <div class="list-item">
                    <span class="item-title">违章位置：</span>
                    <span>{{viewDetail.position}}</span>
                </div>
                <div class="list-item">
                    <span class="item-title">处罚机关：</span>
                    <span>{{viewDetail.department}}</span>
                </div>
                <div class="list-item">
                    <span class="item-title">罚款金额：</span>
                    <span>{{viewDetail.money}}</span>
                </div>
                <div class="list-item">
                    <span class="item-title">扣分：</span>
                    <span>{{viewDetail.score}}</span>
                </div>
                <div class="list-item">
                    <span class="item-title">处罚截止日期：</span>
                    <span>{{viewDetail.break_end_day}}</span>
                </div>
                <div class="list-item" v-if="imgList.length > 0">
                    <span class="item-title">附件图片：</span>
                   <div class="caroul-image">
                        <i 
                            class="el-icon-arrow-left" 
                            v-if="imgList.length > 3"
                            :class="arrowLeft ? '' : 'icon-no-allowed'" 
                            @click="chagneArrowLeft">
                        </i>
                        <span v-for="(item, inx) in getActiveImg" :key="inx">
                            <img :src="BASE_URL + item">
                            <span class="file-img-cover">
                                <i class="el-icon-zoom-in" @click="viewPicture(inx)"></i>
                            </span>
                        </span>
                        <i 
                            class="el-icon-arrow-right" 
                            v-if="imgList.length > 3"
                            :class="arrowRight ? '' : 'icon-no-allowed'" 
                            @click="chagneArrowRight">
                        </i>
                   </div>
                </div>
                <div class="list-item">
                    <span class="item-title">状态：</span>
                    <span v-if="viewDetail.is_solve === 1">已处理</span>
                    <span v-else style="color: #E16060;">未处理</span>
                </div>
            </div>

            <div class="violotion-footer" v-if="viewDetail.is_solve === 0">
                <div class="list-item">
                    <span class="item-title">备注：</span>
                    <el-switch v-model="detailParam.casue"></el-switch>
                </div>
                <el-input
                    v-show="detailParam.casue"
                    type="textarea"
                    placeholder="在此输入备注"
                    :rows="4"
                    v-model="detailParam.reason"
                    maxlength="140"
                    show-word-limit>
                </el-input>
            </div>

            <div slot="footer" class="dialog-footer">
			    <el-button v-if="viewDetail.is_solve === 0" type="primary" @click="submitHandle">标记已处理</el-button>
			</div>
        </el-dialog>

        <image-viewer
            v-if="imagePreview.showViewer"
            :initial-index="imageIndex"
            :on-close="closeViewer"
            :url-list="imagePreview.previewSrcList">
        </image-viewer>
    </div>
</template>

<script>
export default {
    data() {
        return {
            imagePreview: {
                showViewer: false,
                previewSrcList: []
            },
            imgVisible: false, // 图片预览
            detailVisible: false, // 显示详情
            previewImgURL: null, // 图片预览
            rowLen: 0, // 要删除数据的长度
            totalNumber: 0, // 总条数
            activeIndex: 0, // 轮播图
            recordId: null, // 记录id
            activePanel: 'violation', // 默认标签
            listData: [], // 违规列表
            selected: [], // 选中的数据
            imgList: [],
            stateList: [{id: 0, name: '全部状态'}, {id: 1, name: '已处理'}, {id: 2, name: '未处理'}], // 状态列表
            viewDetail: {}, // 详情信息
            loading: {
                status: false, // 是否显示 loading
                txt: '获取数据...' // loading 标题
            },
            listParam: {
                stateId: 0,
                pickerTime: [],
                keyword: '',
                pageSize: 10,
                pageIndex: 1
            },
            detailParam: {
                casue: false,
                reason: ''
            }
        }
    },
    created() {
        this.getList();
    },
    computed: {
        /**
         * 是否显示左箭头
         */
        arrowLeft() {
            return this.imgList.length > 3 && this.activeIndex > 0;
        },
        /**
         * 是否显示右箭头
         */
        arrowRight() {
             return this.imgList.length > 3 && this.activeIndex < Math.floor(this.imgList.length/3);
        },
        /**
         * 获取当前播放的图片
         */
        getActiveImg() {
            return this.imgList.filter((item, inx) => {
                return (inx < 3 * this.activeIndex + 3) && (inx >= 3 * this.activeIndex)
            })
        },
        imageIndex() {
            return this.imagePreview.previewSrcList.indexOf(this.previewImgURL);
        },
    },
    methods: {
        /**
         * 获取违规列表
         */
        getList() {
            this.loading.status = true;

            let success = (res=>{
                this.loading.status = false;
                this.listData = res.data.data;
                this.totalNumber = res.data.data_sum;
            })
            let params = {
                status: this.listParam.stateId,
                start_date: this.listParam[0],
                end_date: this.listParam.pickerTime[1],
                page_index: this.listParam.pageIndex,
                page_size: this.listParam.pageSize,
                keyword: this.listParam.keyword
            }

            this.$ajax.get('api/car/breaklists',{params, func:{success: success}})
        },
        /**
         * 搜索列表
         */
        searchFunc() {
            this.listParam.pageIndex = 1;
            this.getList();
        },
        /**
         * 重置列表
         */
        resetList() {
            this.listParam = {
                stateId: 0,
                pickerTime: [],
                keyword: '',
                pageSize: 10,
                pageIndex: 1
            }

            this.getList();
        },
        /**
         * 是否删除该数据
         * @param {Number} val 要删除数据
         */
        deleteRowConfirm(val) {
            let yes = (res => {
                this.rowLen = 1;

                this.deleteData(val.id, val.car_id);
            })
            let cancel = (res => {})

            this.e_confirm({yes: yes, cancel: cancel, txt: '是否删除该记录?'});
        },
        /**
         * 是否确定批量删除
         */
        dleteAllConfirm() {
            if(this.selected.length === 0) {
                this.$message.warning("请选择要删除的项");
                return false;
            }

            let yes = (res => {
                let ids = [];
                let carid = [];
                this.rowLen = this.selected.length;

                this.selected.forEach(item => {
                    ids.push(item.id);
                    carid.push(item.car_id);
                })
                carid = [...new Set(carid)];

                this.deleteData(ids, carid);
            })
            let cancel = (res => {})

            this.e_confirm({yes: yes, cancel: cancel, txt: '是否批量删除记录?'});
        },
        /**
         * 删除数据
         * @param {Number/Array} 要删除数据的 id
         * @param {Number/Array} 要删除数据的 car id
         */
        deleteData(id, carID) {
            this.loading.status = true;

            let success = (res => {
                this.$message.success(res.msg);
                
                if (this.listData.length === this.rowLen) {
                    if (this.listParam.pageIndex > 1) {
                        this.listParam.pageIndex-- ;
                    } else {
                        this.listParam.pageIndex = 1;
                    }
                }

                this.getList();
            });
            let fail = (res =>{
                this.$message.error(res.msg);

                this.getList();
            }) 
            let params = {
                id,
                flag: 1,
                car_id: carID
            }
            
            this.$ajax.delete('api/car/record', {params, func: {success: success, fail: fail}})
        },
        /**
         * 查看大图
         * 当前页图片下标
         */
        viewPicture(inx) {
            let index = inx + this.activeIndex * 3;
            this.previewImgURL = this.BASE_URL + this.imgList[index];
            this.imagePreview.showViewer = true;
            this.imagePreview.previewSrcList = this.imgList;
        },
        closeViewer() {
            this.imagePreview.showViewer = false;
        },
        /**
         * 向左翻页
         */
        chagneArrowLeft() {
            this.activeIndex > 0 && this.activeIndex--;
        },
        /**
         * 向右翻页
         */
        chagneArrowRight() {
            this.activeIndex + 1 < Math.floor(this.imgList.length/3) && this.activeIndex++
        },
        /**
         * 查看详情
         * @param {Object} id 记录详情
         */
        getDetail(id) {
            this.detailVisible = true;
            this.recordId = id;

            let success = (res => {
                this.activeIndex = 0;
                this.viewDetail = res.data;
                this.imgList = res.data.image ? res.data.image : [];
            })
            let params = {
                id
            }

            this.$ajax.get('api/car/breaksingle', {params, func:{success: success}})
        },
        /**
         * 标记已处理
         */
        submitHandle() {
            const success = (res => {
                this.$message.success(res.msg);
                this.detailVisible = false;

                this.getList();
            })
            const params = {
                id: this.recordId,
                flag: 1,
                s_info: this.detailParam.reason
            }

            this.$ajax.post("api/car/record", params, {func: {success: success}});
        },
        /**
         * 使用记录
         */
        useRecord() {
            this.$router.push('/affairs/vehicle/vehicle-detail/' + this.viewDetail.id + '#use');
        },
        /**
         * 添加记录
         */
        newRecord() {
            this.$router.push('/affairs/vehicle/add-violation');
        },
        /**
         * 编辑记录
         */
        editRow(id) {
            this.$router.push('/affairs/vehicle/edit-violation/' + id);
        },
        /**
         * 切换标签页
         * @param {String} name 标签名字
         */
        changePanel(name) {
            this.activePanel  = name;

            if(name === 'damage'){
                this.$router.push("/affairs/vehicle/damage-list")
            }
        },
        /**
         * 列表数据多选
         * @param {Array} val 选中数据的数组
         */
        tableSelectionChange(val) {
            this.selected = val;
        },
        /**
         * 设置每页中显示的数据数量
         * @param {Number} val 每页数据条数
         */
        changeCurrentSize(val) {
            this.listParam.pageIndex = 1;
            this.listParam.pageSize = val;

            this.getList();
        },
        /**
         * 切换到第几页数据
         * @param {Number} val 页数
         */
        changeCurrentPage(val) {
            this.listParam.pageIndex = val;

            this.getList();
        },
    },
}
</script>

<style lang="scss">
.exception-list {
    .violotion-detail {
        .list-item {
            display: flex;
            margin-bottom: 10px;

            .item-title {
                width: 100px;
            }
            
            >span:last-child {
                flex: 1;
                width: 0;
                color: #000;
            }
        }

        .item-color {
            color: #BE4747;
        }

        .violotion-header {
            position: relative;
            padding-bottom: 6px;
            border-bottom: 1px solid #eee;

            >span{
                position: absolute;
                top: 0;
                right: 0;
                padding: 5px 11px;
                color: #FFFFFF;
                background: #348EFC;
                border-radius: 4px;
                cursor: pointer
            }
        }

        .violotion-main {
            margin-top: 15px;
            padding-bottom: 8px;
            border-bottom: 1px solid #eee;
        }

        .violotion-footer {
            position: relative;
            margin-top: 25px;
            margin-bottom: 30px;
        }
    }

    .caroul-image {
        position: relative;
        display: flex;
        align-items: center;
        width: 100%;
        height: 120px;

        img {
            width: 120px;
            height: 100%;
            object-fit: cover
        }

        >span {
            position: relative;
        }

        >span:nth-child(2) {
            margin-left: 10px;
        }

        >span:nth-child(3) {
            margin: auto 10px;
        }

        >i {
            position: absolute;
            padding: 1px;
            font-size: 30px;
            cursor: pointer;
        }

        >i:hover {
            color: #fff;
            background: rgba(0, 0, 0, 0.3);
            border-radius: 50%;
        }

        .el-icon-arrow-left {
            left: -20px;
        }

        .el-icon-arrow-right {
            right: -20px;
        }

        .icon-no-allowed {
            cursor: not-allowed;
        }

        .file-img-cover {
            display: none;

            >i {
                margin-top: 45px;
                color: #fff;
                font-size: 45px;
                cursor: pointer;
            }
        }

        >span:hover .file-img-cover {
            display: block;
            position: absolute;
            left: 0;
            top: 0;
            width: 100%;
            height: 100%;
            background: rgba(0, 0, 0, 0.5);
            text-align: center;
        }
    }

    .open-width {
        .el-date-editor {
            width: 100%;
            vertical-align: middle;
        }
    }
}
</style>